import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Menu } from "antd";
import { MenuList } from "../../common/MenuList";
const { SubMenu } = Menu;

class SiderBar extends Component {
  menuMap = (MenuList) => {
    const path = this.props.location.pathname;
    return MenuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item
            key={item.key}
            icon={item.icon}
            onClick={() => {
              this.props.history.replace(item.key);
            }}
          >
            {item.title}
          </Menu.Item>
        );
      } else {
        const cItem = item.children.find((cItem) => cItem.key === path);
        if (cItem) {
          this.openKey = item.key;
        }
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {this.menuMap(item.children)}
          </SubMenu>
        );
      }
    });
  };
  componentWillMount() {
    this.MenuNodes = this.menuMap(MenuList);
  }
  render() {
    const selectKey = this.props.location.pathname;
    return (
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={[selectKey]}
        defaultOpenKeys={[this.openKey]}
      >
        {this.MenuNodes}
      </Menu>
    );
  }
}

export default withRouter(SiderBar);
